<!--封装地址选择器组件-->
<template>
    <div>
        <el-cascader :disabled="disabled" :style="'width:'+width" v-if="hover" v-model="sonLocal" :options="options" :props="{ value: 'label',expandTrigger: 'hover'}"  @change="handleChange"></el-cascader>
        <el-cascader :disabled="disabled" :style="'width:'+width" v-else v-model="sonLocal" :options="options" :props="{ value: 'label' }" @change="handleChange"></el-cascader>
    </div>
</template>

<script>
    import city from './hmCitys'
    export default {
        name:'CitySelect',
        props:{
            hover: {
                type: Boolean,
                default: false
            },
            width:{
                type: String,
                default: "100%"
            },
            local:{
                type: Array,
                default:function () { return [] }
            },
            disabled: {
                type: Boolean,
                default: false
            },
        },
        data(){
            return{
                options:city,
                sonLocal:this.local
            }
        },
        created() {

        },
        methods:{
            handleChange(local){
                this.$emit('handleChange',local);
            }
        },
        watch:{
            local: {
                handler(newName, oldName) {
                    this.sonLocal=newName
                },
                immediate: true
            }
        }
    }
</script>
